<template>
  <div class="warpper-box sendSalary">
    <a-card>
      <a-row :gutter="20">
        <a-col :span="4">
          <a-card>
            <a-statistic title="社保个人小计" :value="statisticsInfo.insurCountAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <a-statistic title="本月实际领取-应发" :value="statisticsInfo.shouldBeAmount" :value-style="{ color: '#cf1322' }"  prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <a-statistic title="本月预扣缴个税额" :value="statisticsInfo.byYkjTaxAmount" :value-style="{ color: '#cf1322' }"  prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <a-statistic title="实发工资" :value="statisticsInfo.settleAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <a-statistic title="本月到账总计" :value="statisticsInfo.countBydzAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card>
            <a-statistic title="工资服务费" :value="statisticsInfo.gzFwfAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="8" style="margin-top: 20px;">
          <a-card>
            <a-statistic title="养老保险个人缴纳" :value="statisticsInfo.insurYlaoAmount" :value-style="{ color: '#cf1322' }"  prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4" style="margin-top: 20px;">
          <a-card>
            <a-statistic title="医疗保险金额" :value="statisticsInfo.insurYliaoAmount" :value-style="{ color: '#cf1322' }"  prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4" style="margin-top: 20px;">
          <a-card>
            <a-statistic title="失业保险金额" :value="statisticsInfo.insurSiyeAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4" style="margin-top: 20px;">
          <a-card>
            <a-statistic title="大病保险金额" :value="statisticsInfo.insurDbinAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4" style="margin-top: 20px;">
          <a-card>
            <a-statistic title="住房保险金额" :value="statisticsInfo.insurZfangAmount" :value-style="{ color: '#cf1322' }" prefix="￥">
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-form layout="inline">
        <a-form-item label="用户名称">
          <a-input placeholder="请输入用户名称" v-model="params.userName"></a-input>
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input placeholder="请输入身份证号" v-model="params.idCard"></a-input>
        </a-form-item>
        <a-form-item label="是否错误">
          <a-select placeholder="请选择" v-model="params.isWrong" style="width: 160px;">
            <a-select-option key="1">是</a-select-option>
            <a-select-option key="2">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="addLoad">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
          <a-button type="primary" @click="importHandle" v-if="settleStatus == 0">导入发薪明细</a-button>
          <a-button type="primary" @click="exportSalary">导出发薪明细</a-button>
          <a-button type="danger" @click="delSalary" :disabled="selectedRowKeys.length == 0">删除发薪明细</a-button>
        </a-form-item>
      </a-form>
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="importId"
        @change="handleTableChange" :scroll="{ x: true }">
        <span slot="insurYlaoAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurYlaoAmount_1 || record.insurYlaoAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurYlaoAmount_1 || record.insurYlaoAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurYlaoAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurYliaoAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurYliaoAmount_1 || record.insurYliaoAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurYliaoAmount_1 || record.insurYliaoAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurYliaoAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurSiyeAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurSiyeAmount_1 || record.insurSiyeAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurSiyeAmount_1 || record.insurSiyeAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurSiyeAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurDbinAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurDbinAmount_1 || record.insurDbinAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurDbinAmount_1 || record.insurDbinAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurDbinAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurZfangAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurZfangAmount_1 || record.insurZfangAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurZfangAmount_1 || record.insurZfangAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurZfangAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurBuYlaoAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurBuYlaoAmount_1 || record.insurBuYlaoAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurBuYlaoAmount_1 || record.insurBuYlaoAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurBuYlaoAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurBuYliaoAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurBuYliaoAmount_1 || record.insurBuYliaoAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurBuYliaoAmount_1 || record.insurBuYliaoAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurBuYliaoAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurBuSiyeAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurBuSiyeAmount_1 || record.insurBuSiyeAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurBuSiyeAmount_1 || record.insurBuSiyeAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurBuSiyeAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurBuDbinAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurBuDbinAmount_1 || record.insurBuDbinAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurBuDbinAmount_1 || record.insurBuDbinAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurBuDbinAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurBuZfangAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurBuZfangAmount_1 || record.insurBuZfangAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurBuZfangAmount || record.insurBuZfangAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurBuZfangAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="insurCountAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.insurCountAmount_1 || record.insurCountAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.insurCountAmount_1 || record.insurCountAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.insurCountAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="countSpecialAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countSpecialAmount_1 || record.countSpecialAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countSpecialAmount_1 || record.countSpecialAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countSpecialAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="grandTotalAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.grandTotalAmount_1 || record.grandTotalAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.grandTotalAmount_1 || record.grandTotalAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.grandTotalAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="leijiJcAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.leijiJcAmount_1 || record.leijiJcAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.leijiJcAmount_1 || record.leijiJcAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.leijiJcAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="countLeijiYlsSdAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countLeijiYlsSdAmount_1 || record.countLeijiYlsSdAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countLeijiYlsSdAmount_1 || record.countLeijiYlsSdAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countLeijiYlsSdAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="taxFee" slot-scope="text, record">
          <div :class="{ 'redTip': record.taxFee_1 || record.taxFee_1 == 0 }">
            {{ text }}
            <span v-if="record.taxFee_1 || record.taxFee_1 == 0">
              <a-divider type="vertical" />
              {{ record.taxFee_1 }}
            </span>
          </div>
        </span>
        <span slot="countSsKcAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countSsKcAmount_1 || record.countSsKcAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countSsKcAmount_1 || record.countSsKcAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countSsKcAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="countLeijiYlsAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countLeijiYlsAmount_1 || record.countLeijiYlsAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countLeijiYlsAmount_1 || record.countLeijiYlsAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countLeijiYlsAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="leijiYyjTaxAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.leijiYyjTaxAmount_1 || record.leijiYyjTaxAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.leijiYyjTaxAmount_1 || record.leijiYyjTaxAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.leijiYyjTaxAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="byYkjTaxAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.byYkjTaxAmount_1 || record.byYkjTaxAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.byYkjTaxAmount_1 || record.byYkjTaxAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.byYkjTaxAmount_1 }}
            </span>
          </div>
        </span>

        <span slot="nzjTaxAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.nzjTaxAmount_1 || record.nzjTaxAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.nzjTaxAmount_1 || record.nzjTaxAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.nzjTaxAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="nzjSfAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.nzjSfAmount_1 || record.nzjSfAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.nzjSfAmount_1 || record.nzjSfAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.nzjSfAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="countShtzAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countShtzAmount_1 || record.countShtzAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countShtzAmount_1 || record.countShtzAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countShtzAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="settleAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.settleAmount_1 || record.settleAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.settleAmount_1 || record.settleAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.settleAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="countBydzAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.countBydzAmount_1 || record.countBydzAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.countBydzAmount_1 || record.countBydzAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.countBydzAmount_1 }}
            </span>
          </div>
        </span>
        <span slot="gzZzsTaxAmount" slot-scope="text, record">
          <div :class="{ 'redTip': record.gzZzsTaxAmount_1 || record.gzZzsTaxAmount_1 == 0 }">
            {{ text }}
            <span v-if="record.gzZzsTaxAmount_1 || record.gzZzsTaxAmount_1 == 0">
              <a-divider type="vertical" />
              {{ record.gzZzsTaxAmount_1 }}
            </span>
          </div>
        </span>
      </a-table>
      <div style="height: 60px;"></div>
    </a-card>
    <!-- 导入发薪明细 -->
    <a-modal v-model="importVisible" title="导入详情" width="1000px" :footer="null">
      <a-alert message="第一步：下载导入信息模板；模版内的表头请勿改动，防止导入时出错。" type="info" style="margin-bottom: 10px;"/>
      <checkbox-group v-model="salaryList">
        <checkbox v-for="item in salaryOptions" :label="item.fieldName" :key="item.fieldName" :disabled="item.deafault"></checkbox>
      </checkbox-group>
      <a-button type="primary" @click="downloadSalary" ghost style=";margin: 20px 0;width: 160px;">下载模板</a-button>
      <a-alert message="第二步：批量导入数据；请填写完整的信息。" type="info" />
      <a-button type="primary" @click="importSalary" style="margin: 20px 0;width: 160px;">上传文件</a-button>
      <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ref="fileExcel"
        @change="importSalaryHandle" style="display: none;" />
    </a-modal>
    <!-- 返回||提交 -->
    <a-card class="footBtn" hoverable :bordered="false">
      <a-button key="back" icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
      <a-button v-if="settleStatus == 0" :disabled="table.loadData.length == 0" type="primary" icon="file-done"
        @click="submit" style="margin-left: 10px;">提交</a-button>
    </a-card>
  </div>
</template>

<script>
import store from '@/store'
import {
  getImportDetailPageQuery,
  downTemplate,
  importSalaryDetail,
  deleteBatchByImportIds,
  salaryConfirmOrder,
  queryFields,
  exportImportExcelDetails,
  queryImportCount
} from "@/api/human/salaryPaySendSalary"
import { mapGetters, mapActions } from 'vuex'
import { Checkbox,CheckboxButton,CheckboxGroup } from 'element-ui';
export default {
  name: 'sendSalaryImportDetail',
  components: {
    Checkbox,
    CheckboxButton,
    CheckboxGroup
  },
  data() {
    return {
      params: {
        userName: "",
        idCard: "",
        isWrong: undefined,
      },
      table: {
        columns: [],
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      tableWidth: 1600, // 表格宽度
      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      orderId: "", // 订单id
      settleStatus: "", // 订单状态

      importVisible: false, // 导入发薪明细显示
      salaryList: [], // 发薪明细选择数据
      salaryOptions: [], // 发薪明细初始化数据

      statisticsInfo: {},
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {

  },
  activated() {
    this.enterpriseId = this.$route.query.enterpriseId || "";
    this.orderId = this.$route.query.orderId || "";
    this.settleStatus = this.$route.query.settleStatus || "";
    this.loadTable(true);
    this.getStatisticsInfo();
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 获取企业员工列表
    async loadTable(flag) {
      // table配置项重置
      this.table.columns = [
        {
          title: '薪资月',
          dataIndex: 'period',
          fixed: 'left'
        },
        {
          title: '员工系统号',
          dataIndex: 'staffSysId',
          fixed: 'left'
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          fixed: 'left'
        },
        {
          title: '证件号码',
          dataIndex: 'idCard',
          fixed: 'left'
        },
        {
          title: '入职日期',
          dataIndex: 'entryDay',
        },
        {
          title: '离职生效日期',
          dataIndex: 'departureDay',
        },
        {
          title: '员工一级类别',
          dataIndex: 'staffLeaveOne',
        },
        {
          title: '员工二级类别',
          dataIndex: 'staffLeaveTwo',
        },
        {
          title: '合同主体',
          dataIndex: 'subjectContract',
        },
        {
          title: '纳税主体名称',
          dataIndex: 'subjectName',
        },
        {
          title: '纳税主体编号',
          dataIndex: 'subjectNumber',
        },
        {
          title: '派单机构',
          dataIndex: 'orderingOrg',
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
        },
        {
          title: '银行卡号',
          dataIndex: 'bankCard',
        },
        {
          title: '养老保险个人缴纳',
          dataIndex: 'insurYlaoAmount',
          scopedSlots: { customRender: 'insurYlaoAmount' }
        },
        {
          title: '医疗保险个人缴纳',
          dataIndex: 'insurYliaoAmount',
          scopedSlots: { customRender: 'insurYliaoAmount' }
        },
        {
          title: '失业保险个人缴纳',
          dataIndex: 'insurSiyeAmount',
          scopedSlots: { customRender: 'insurSiyeAmount' }
        },
        {
          title: '大病医疗个人缴纳',
          dataIndex: 'insurDbinAmount',
          scopedSlots: { customRender: 'insurDbinAmount' }
        },
        {
          title: '住房公积金个人缴纳',
          dataIndex: 'insurZfangAmount',
          scopedSlots: { customRender: 'insurZfangAmount' }
        },
        {
          title: '养老保险个人补缴',
          dataIndex: 'insurBuYlaoAmount',
          scopedSlots: { customRender: 'insurBuYlaoAmount' }
        },
        {
          title: '医疗保险个人补缴',
          dataIndex: 'insurBuYliaoAmount',
          scopedSlots: { customRender: 'insurBuYliaoAmount' }
        },
        {
          title: '失业保险个人补缴',
          dataIndex: 'insurBuSiyeAmount',
          scopedSlots: { customRender: 'insurBuSiyeAmount' }
        },
        {
          title: '大病医疗个人补缴',
          dataIndex: 'insurBuDbinAmount',
          scopedSlots: { customRender: 'insurBuDbinAmount' }
        },
        {
          title: '住房公积金个人补缴',
          dataIndex: 'insurBuZfangAmount',
          scopedSlots: { customRender: 'insurBuZfangAmount' }
        },
        {
          title: '社保个人小计',
          dataIndex: 'insurCountAmount',
          scopedSlots: { customRender: 'insurCountAmount' }
        },
        {
          title: '竞业限制金',
          dataIndex: 'competitionAmount'
        },
        {
          title: '公积金免税上限超额',
          dataIndex: 'gjjMcSxAmount'
        },
        {
          title: '专项扣除小计',
          dataIndex: 'countSpecialAmount',
          scopedSlots: { customRender: 'countSpecialAmount' }
        },
        {
          title: '捐赠',
          dataIndex: 'jzAmount'
        },
        {
          title: '本期免税收入',
          dataIndex: 'bqmsSrAmount'
        },
        {
          title: '计税不发薪项',
          dataIndex: 'jsBfxAmount'
        },
        {
          title: '计税不发薪项-商保',
          dataIndex: 'jsBfxSbAmount'
        },
        {
          title: '本月实际领取',
          dataIndex: 'shouldBeAmount',
        },
        {
          title: '累计收入额',
          dataIndex: 'grandTotalAmount',
          scopedSlots: { customRender: 'grandTotalAmount' }
        },
        {
          title: '累计费用',
          dataIndex: 'leijiTotalAmount'
        },
        {
          title: '累计免税收入',
          dataIndex: 'leijiMsSrAmount',
        },
        {
          title: '累计减免费用(起征点累计)',
          dataIndex: 'leijiJcAmount',
          scopedSlots: { customRender: 'leijiJcAmount' }
        },
        {
          title: '累计专项扣除',
          dataIndex: 'leijiZxKcAmount'
        },
        {
          title: '年度累计捐赠',
          dataIndex: 'leijiNdJzAmount'
        },
        {
          title: '累计子女教育支出扣除',
          dataIndex: 'leijiZnjyZcAmount'
        },
        {
          title: '累计继续教育支出扣除',
          dataIndex: 'leijiJxjyZcAmount'
        },
        {
          title: '累计住房贷款利息支出扣除',
          dataIndex: 'leijiZfdklxZcAmount',
        },
        {
          title: '累计住房租金支出扣除',
          dataIndex: 'leijiZfzjZcAmount'
        },
        {
          title: '累计赡养老人支出扣除',
          dataIndex: 'leijiSylrZcAmount'
        },
        {
          title: '累计婴幼儿照护费支出扣除',
          dataIndex: 'leijiYyezhZcAmount'
        },
        {
          title: '累计个人养老金',
          dataIndex: 'leijiGryljAmount'
        },
        {
          title: '大病医疗专项扣减',
          dataIndex: 'dbYlZxKjAmount',
        },
        {
          title: '累计应纳税所得额',
          dataIndex: 'countLeijiYlsSdAmount',
          scopedSlots: { customRender: 'countLeijiYlsSdAmount' }
        },
        {
          title: '税率',
          dataIndex: 'taxFee',
          scopedSlots: { customRender: 'taxFee' }
        },
        {
          title: '速算扣除数',
          dataIndex: 'countSsKcAmount',
          scopedSlots: { customRender: 'countSsKcAmount' }
        },
        {
          title: '累计应纳税额',
          dataIndex: 'countLeijiYlsAmount',
          scopedSlots: { customRender: 'countLeijiYlsAmount' }
        },
        {
          title: '累计已预缴税额',
          dataIndex: 'leijiYyjTaxAmount',
          scopedSlots: { customRender: 'leijiYyjTaxAmount' }
        },
        {
          title: '累计减免税额',
          dataIndex: 'leijiJmAmount'
        },
        {
          title: '本月预扣缴个税额',
          dataIndex: 'byYkjTaxAmount',
          scopedSlots: { customRender: 'byYkjTaxAmount' }
        },
        {
          title: '劳务费个税',
          dataIndex: 'lwfTaxAmount'
        },
        {
          title: '经济补偿金-含税',
          dataIndex: 'jjbcjAmount'
        },
        {
          title: '经济补偿金所得税',
          dataIndex: 'jjbcjTaxAmount',
        },
        {
          title: '经济补偿金实发',
          dataIndex: 'jjbcjSfAmount'
        },
        {
          title: '年终奖领取',
          dataIndex: 'nzjAmount'
        },
        {
          title: '年终奖所得税',
          dataIndex: 'nzjTaxAmount',
          scopedSlots: { customRender: 'nzjTaxAmount' }
        },
        {
          title: '其他类扣款(税后)',
          dataIndex: 'qtlKkAmount'
        },
        {
          title: '年终奖实发',
          dataIndex: 'nzjSfAmount',
          scopedSlots: { customRender: 'nzjSfAmount' }
        },
        {
          title: '互助金/关爱基金',
          dataIndex: 'hzjGajjAmount'
        },
        {
          title: '税后扣款-商保',
          dataIndex: 'shkkSbAmount'
        },
        {
          title: '税后扣款-意外',
          dataIndex: 'shkkYwAmount',
        },
        {
          title: '税后扣款-社保其他代缴',
          dataIndex: 'shkkSbqtdjAmount'
        },
        {
          title: '个税差补扣款',
          dataIndex: 'gscbKkAmount'
        },
        {
          title: '税后其他扣罚款',
          dataIndex: 'shqtKkAmount',
        },
        {
          title: '生育津贴免税发放',
          dataIndex: 'syjtMsAmount'
        },
        {
          title: '工伤津贴免税发放',
          dataIndex: 'gsjtMsAmount',
        },
        {
          title: '税后其他补款',
          dataIndex: 'shqtBkAmount',
        },
        {
          title: '孝顺金税后',
          dataIndex: 'xsjShAmount'
        },
        {
          title: '当月税后欠款',
          dataIndex: 'dyShQkAmount',
        },
        {
          title: '税后调整小计',
          dataIndex: 'countShtzAmount',
          scopedSlots: { customRender: 'countShtzAmount' }
        },
        {
          title: '实发工资',
          dataIndex: 'settleAmount',
          scopedSlots: { customRender: 'settleAmount' }
        },
        {
          title: '本月到账总计',
          dataIndex: 'countBydzAmount',
          scopedSlots: { customRender: 'countBydzAmount' }
        },
        {
          title: '工资服务费',
          dataIndex: 'gzFwfAmount'
        },
        {
          title: '工资增值税费',
          dataIndex: 'gzZzsTaxAmount',
          scopedSlots: { customRender: 'gzZzsTaxAmount' }
        },
        {
          title: '工会会费',
          dataIndex: 'ghFhAmount'
        },
        {
          title: '员工发薪主体',
          dataIndex: 'ygfxzt',
        },
      ];

      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.orderId = this.orderId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getImportDetailPageQuery(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 获取导入明细统计金额
    async getStatisticsInfo() {
      let params = this.params;
      params.orderId = this.orderId;
      const { code, data } = await queryImportCount(params);
      if (code === '1') {
        this.statisticsInfo = data;
      }
    },
    // 导入按钮点击操作
    importHandle() {
      this.importVisible = true;
      this.salaryList = [];
      this.getSalary();
    },
    // 获取发薪明细选择数据
    async getSalary() {
      const { code,data } = await queryFields();
      if (code === '1') {
        this.salaryOptions = data;
        data.forEach(item => {
          if (item.deafault) {
            this.salaryList.push(item.fieldName)
          }
        });
      }
    },
    // 导出发薪明细
    exportSalary() {
      let params = this.params;
      params.orderId = this.orderId;
      exportImportExcelDetails(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '发薪明细.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 下载模板
    downloadSalary() {
      downTemplate({
        enterpriseId: this.enterpriseId,
        defaultFields: this.salaryList
      }).then(res => {
        const blob = new Blob([res]);
        const fileName = '发薪明细模板.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 导入表单
    importSalary() {
      this.$refs.fileExcel.click();
    },
    importSalaryHandle(e) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.name.indexOf('.xls') === -1) {
        _this.$message.error("只支持xlsx");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 20)) {
        _this.$message.error('模版大小不能超过 20MB!');
        e.target.value = "";
        return;
      }
      e.target.value = "";
      if (file) {
        let formData = new FormData();
        formData.append("orderId", _this.orderId);
        formData.append("file", file);
        importSalaryDetail(formData).then((res) => {
          if (res.code == 1) {
            _this.importVisible = false;
            _this.$message.success('操作成功');
            _this.loadTable(true);
            _this.getStatisticsInfo();
          }
        })
      }
    },
    // 删除导入发薪明细
    async delSalary() {
      let params = {
        importIds: this.selectedRowKeys,
        orderId: this.orderId
      }
      const { code } = await deleteBatchByImportIds(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.selectedRowKeys = [];
        this.loadTable(true);
        this.getStatisticsInfo();
      }
    },
    // 提交
    async submit() {
      const { code } = await salaryConfirmOrder({ orderId: this.orderId });
      if (code == '1') {
        this.$message.success('操作成功');
        this.goBack();
      }
    },
    addLoad() {
      this.loadTable(true);
      this.getStatisticsInfo();
    },
    reset() {
      this.params.userName = '';
      this.params.idCard = '';
      this.params.isWrong = undefined;
      this.loadTable(true);
      this.getStatisticsInfo();
    },
    goBack() {
      this.$router.back();
    }
  }
}
</script>
<style lang="less">
.sendSalary {
  .redTip {
    background-color: #fff1f0;
    border: 1px solid #ffa39e;
    color: rgba(0, 0, 0, .85);
    text-align: center;
    padding: 0 10px;
    border-radius: 4px;
  }
}
</style>